<template>
	<view class="order">
		<u-navbar title="我的订单" :background="background" back-icon-color="#FFF" title-color="#fff" title-size="32" :border-bottom="false"></u-navbar>
		<view class="bg"><image src="../../static/images/bg7@2x.png"></image></view>
		<view class="fix-top">
			<view class="fix-navs u-flex u-col-center">
				<view class="" style="width: 100%;height: 80rpx;">
					<u-tabs
						:list="list"
						:is-scroll="false"
						bar-width="94"
						bar-height="4"
						active-color="#F5B340"
						:bold="false"
						font-size="28"
						is-scroll
						:current="current"
						@change="change"
					></u-tabs>
				</view>
			</view>
		</view>
		<view class="u-flex  u-row-center u-margin-top-40" style="height: 80rpx;position: fixed;z-index: 999;">
			<u-loading mode="circle" :show="show_loading" color="#F5B340"></u-loading>
		</view>
		<view class="order-content">
			<u-empty text="暂无数据" mode="list" v-if="!order_list.length"></u-empty>
			<scroll-view v-else scroll-y="true" style="height: 100%;padding-top: 38rpx;box-sizing: border-box;" @scrolltolower="onreachBottom" scroll-anchoring :show-scrollbar="true">
				<view class="item u-flex u-flex-col u-row-center" v-for="(item,index) in order_list" :key="item.id" @click="view2page(item)">
					<!-- <navigator :url="" class="u-flex u-flex-col u-row-center" hover-class="none" style="width: 100%;"> -->
						<text class="period" v-if="current!==4&& current!==2">第{{ item.stage }}期</text>
						<view class="u-flex u-col-center u-row-between item-center" style="width: 100%;">
							<view class="u-flex u-col-center">
								<view class="goods-img"><image :src="item.icon" mode=""></image></view>
								<view class="">
									<view class="price">
										<text>￥</text>
										{{current===4 ||current===2 ?item.amount:item.price}}
									</view>
									<view class="goods-name">{{current===4 ||current===2?'x'+item.num:item.name}}</view>
								</view>
								<view class="u-flex u-col-center status-box" v-if="current!==4 && current!==2">
									<view class="order-status" :class="[item.win==1?'order-status-await':item.win==2?'order-status-success':'order-status-fail']">
										{{item.win==1?'等待中':item.win==2?'抢到':'未抢到'}}
									</view>
									<view class="emoji-icon"><image :src="emojiList[item.win-1]" mode=""></image></view>
								</view>
							</view>
							<view class="right-icon"><image src="../../static/images/icon_more@2x.png" mode=""></image></view>
						</view>
						<view class="u-flex u-col-center u-row-between" style="width: 100%;">
							<view class="">{{item.updated_at}}</view>
							<view class="" v-show="item.stats == 2">交易成功</view>
						</view>
					<!-- </navigator> -->
				</view>
				<u-loadmore :status="status" @loadmore="onreachBottom" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
let meta = {
	current_page:0,
	per_page:15
}
export default {
	data() {
		return {
			list: [ { name: '抢肉鸡' }, { name: '养蛋鸡' }, { name: '买小鸡' }, { name: '抢饲料' }, { name: '复活鸡' }],
			current: 0,
			background: {
				// background: 'url(../../static/images/bg7@2x.png) no-repeat',
				// backgroundSize: 'cover',
			},
			emojiList:["../../static/images/1@2x.png","../../static/images/3@2x.png","../../static/images/2@2x.png"],
			order_list:[],
			status: "loadmore",
			show_loading:false
		};
	},
	onReady() {
		this.getOrderList()
	},
	onPullDownRefresh(){
		this.show_loading = true;
		meta.current_page = 0;
		uni.showLoading({
			mask:true,
			title:"数据加载中..."
		})
		this.status="loadmore"
		this.order_list=[]
		this.getOrderList()
	},
	methods: {
		view2page(item){
			if(this.current === 2 || this.current === 4){
				// uni.navigateTo({
				// 	url:`../orderDetail/orderDetail?order_id=${item.id}`
				// })
			}else{
				uni.navigateTo({
					url:`../../buychicken/paysuccess/paysuccess?collage_id=${item.collage_id}`
				})
			}
		},
		change(index) {
			this.current = index;
			meta.current_page = 0;
			this.status="loadmore"
			this.order_list = []
			uni.showLoading({
				mask:true,
				title:"数据加载中..."
			})
			this.getOrderList();
		},
		onreachBottom() {
			if (meta.total_pages === meta.current_page) {
				this.status = 'nomore'
				return false
			}
			uni.showLoading({
				mask:true,
				title:"数据加载中..."
			})
			this.status = 'loading';
			this.getOrderList();
		},
		getOrderList(){
			let params = {
				type:this.current+1,
				page:meta.current_page+1,
				page_size:meta.per_page
			}
			this.$u.api.getOrder(params).then(res=>{
				uni.hideLoading()
				if(this.show_loading){
					uni.stopPullDownRefresh()
				}
				if(res.errno === "000"){
					this.order_list = [...this.order_list,...res.result.data]
					meta = res.result.meta
				}else{
					this.status = 'nomore';
				}
				this.show_loading = false
			}).catch(err=>{
				console.log(err);
			})
			
		}
	},
	onUnload() {
		meta.current_page = 0
	}
};
</script>

<style>
.order {
	height: 100vh;
	background: rgb(241, 245, 246);
}
.bg {
	position: fixed;
	top: -44px;
	z-index: 1;
	width: 100%;
	height: 324rpx;
}
.bg image {
	width: 100%;
	height: 100%;
	display: flex;
}
.fix-top {
	width: 100%;
	position: fixed;
	top: 171rpx;
	z-index: 3;
}
.fix-navs {
	width: 90%;
	height: 140rpx;
	background: #ffffff;
	border-radius: 20rpx;
	margin: 0 auto;
	overflow: hidden;
}
.order-content {
	/* background: ; */
	width: 90%;
	margin: 0 auto;
	height: 75vh;
	position: relative;
	top: 182rpx;
}
.item {
	width: 100%;
	padding: 0 32rpx 32rpx 40rpx;
	box-sizing: border-box;
	background: #ffffff;
	border: 4rpx solid rgba(247, 138, 65, 1);
	border-radius: 20rpx;
	margin-bottom: 38rpx;
	font-size: 28rpx;
	color: #999999;
}
.price {
	font-size: 40rpx;
	color: #f78a41;
}
.price text {
	font-size: 28rpx;
}
.goods-img {
	width: 80rpx;
	height: 80rpx;
	overflow: hidden;
	border: 4rpx solid rgba(216, 108, 43, 1);
	border-radius: 50%;
	margin-right: 30rpx;
}
.status-box {
	margin-left: 30rpx;
}
.item-center {
	margin: 30rpx 0;
}
.goods-name {
	max-width: 200rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.emoji-icon {
	width: 44rpx;
	height: 44rpx;
}
.right-icon {
	width: 50rpx;
	height: 50rpx;
}
.order-status {
	width: 120rpx;
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	color: #ffffff;
	margin-right: 10rpx;
	border-radius: 20rpx;
}
.order-status-await {
	background: #fdb544;
}
.order-status-success {
	background: #76cf6d;
}
.order-status-fail {
	background: #f75f53;
}
.order-content image {
	width: 100%;
	height: 100%;
}
.period {
	color: #ffffff;
	background: #f78a41;
	width: 260rpx;
	height: 38rpx;
	line-height: 38rpx;
	text-align: center;
	border-bottom-right-radius: 40rpx;
	border-bottom-left-radius: 40rpx;
}
</style>
